<template>
	<view class="orderInfoBox">
		<n-loading></n-loading>
		<image class="titleBg" src="https://lovebirdopen.com/static/img/cBj/liquorCardBj.png"></image>
		<view v-if="orderInfo">
			<!-- 订单状态 -->
			<view class="orderStatesBox" v-if="orderInfo.afterSales==null || orderInfo.afterSales.apply_cancel==2">
				<view class="orderStates">
					<view v-if="orderInfo.is_offline==0">交易成功</view>
					<view v-if="orderInfo.is_offline==1">待核销</view>
				</view>
			</view>
			<!-- 退款 -->
			<view class="orderStatesBox" v-if="orderInfo.afterSales!=null && orderInfo.afterSales.type == 1 && orderInfo.afterSales.apply_cancel == 1">
				<view class="orderStates">
					<view class="">
					{{orderInfo.afterSales.status==1?'审核中':(orderInfo.afterSales.status==2?'已通过审核':(orderInfo.afterSales.status==3?'未通过审核':'售后完成'))}}
					</view>
					<view class="orderStatesTips">
					{{orderInfo.afterSales.status==1?'您已成功发起退款申请，请耐心等待':(orderInfo.afterSales.status==2?'您已通过审核，退款金额将于48小时内原路返回至您的账户':(orderInfo.afterSales.status==3?'您的申请未通过，请到售后单查看未通过原因。':''))}}
					</view>
				</view>
			</view>
			<!-- 退货 -->
			<view class="orderStatesBox" v-if="orderInfo.afterSales!=null && orderInfo.afterSales.type == 2 && orderInfo.afterSales.apply_cancel == 1">
				<view class="orderStates">
					<view class="">
						{{orderInfo.afterSales.status==1?'审核中':(orderInfo.afterSales.status==2?'已通过审核':(orderInfo.afterSales.status==3?'未通过审核':(orderInfo.afterSales.status==4?'退货超时':'售后完成')))}}
					</view>
					<view class="orderStatesTips">
					{{orderInfo.afterSales.status==1?'您已成功发起退货申请，请耐心等待':(orderInfo.afterSales.status==2?'商家已同意退货申请，请及时退货。':(orderInfo.afterSales.status==3?'您的申请未通过，请到售后单查看未通过原因。':(orderInfo.afterSales.status==4?'退货已超时，该商品已不可退货。':'')))}}
					</view>
				</view>
			</view>
			<!-- 地址 -->
			<view class="takeGoodsTips">
				<view class="tipsContBox" v-if="orderInfo.is_offline==0">
					<u-icon name="map" color="#333333" size="48"></u-icon>
					<view class="tipsCont">
						<view class="tipsContTit">
							<text>{{orderInfo.ship_name}}</text>
							<text>{{orderInfo.ship_phone}}</text>
						</view>
						<view class="tipsContInfo">{{orderInfo.detail_address}}</view>
					</view>
				</view>
				<view class="tipsContBox mt24" v-if="orderInfo.is_offline==0 && logistics" @tap="logisticsGo">
					<u-icon name="car" color="#333333" size="48"></u-icon>
					<view class="tipsCont">
						<view class="tipsContTit ellipsis2">
							<text>{{logistics.status}}</text>
						</view>
						<view class="tipsContInfo">{{logistics.time}}</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
				
				<!-- 商品详情 -->
				<view class="infoContBox mt24">
					<view class="shopInfo">
						<dh-image class="shopLogo" :src="orderInfo.store.logo==null?'../../static/img/vector.svg':orderInfo.store.logo"
						 errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
						  {{orderInfo.store.name}}
					</view>
					
					<view class="goodsCont" v-for="(goods,index) of orderInfo.items">
						<dh-image class="niccImg" :src="goods.image"
						 errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
						<view class="goodsInfo">
							<view class="tit">
								<view class="titleft ellipsis">{{goods.name}}</view>
								
							</view>
							<view class="specsBox">
								<view class="specs">{{goods.specs}}</view>
							</view>
							<view class="priceBox">
								<view class="price">￥{{goods.price}}</view>
								<text>×{{goods.num}}</text>
							</view>
						</view>
					</view>
					
					<view class="detailsEach">订单金额<text>￥{{orderInfo.order_amount}}</text></view>
					<view class="detailsEach" v-if="orderInfo.is_offline==0">运费<text>￥{{orderInfo.cost_freight==null?'0.00':orderInfo.cost_freight}}</text></view>
					<view class="detailsEach">优惠金额<text>-￥{{orderInfo.coupon_pmt==null?'0.00':orderInfo.coupon_pmt}}</text></view>
					<view class="detailsEach">金币抵扣<text>-￥{{orderInfo.point_money==null?'0.00':orderInfo.point_money}}</text></view>
					<view class="detailsEach">高粱穗抵扣<text>-￥{{orderInfo.coin_money==null?'0.00':orderInfo.coin_money}}</text></view>
					<view class="detailsEach">实付款<text class="orange">￥{{orderInfo.pay_amount}}</text></view>
					
				</view>
				<!-- 核销码 -->
				<view class="carrdInfoBottom" v-if="orderInfo.is_offline==1">
					<view class="b-l-t"></view>
					<view class="b-r-t"></view>
					<!-- 内容 -->
					<view class="pickupCode">
						<view v-for="(v,i) of orderInfo.virtual" :key="i">
							<img :src="v.pickup_code_img" />
							<view class="pickupNum" v-if="v.is_verification==0">取货号：{{v.pickup_code}}</view>
							<!-- 已提货 -->
							<view class="pickedUpMask" v-if="v.is_verification==1"></view>
							<image class="pickedUp" src="../../static/img/yth.svg" mode="" v-if="v.is_verification==1"></image>
							<!-- 已退款 -->
							<view class="pickedUpMask" v-if="v.is_verification==2"></view>
							<image class="pickedUp" src="../../static/img/ytk.svg" mode="" v-if="v.is_verification==2"></image>
						</view>
					</view>
				</view>
				<!-- 取货商家 -->
				
				<!-- 已取货 -->
				<view class="useRule" v-if="orderInfo.is_offline==1">
					<view class="useRuleTit">取货门店</view>
					<view class="seeDesirable">
						<view class="left">
							<view class="tit">{{storeInfoList.name}}</view>
							<view class="tips">{{storeInfoList.address}}</view>
						</view>
						<!-- <u-icon name="arrow-right" color="#999" size="20"></u-icon> -->
					</view>
					<view class="mapBox">
						<map style="width:100%;height:100%" :latitude="storeInfoList.lat" :longitude="storeInfoList.lon" :markers="curmarkers">
						</map>
					</view>
					<view class="distance" @tap="tomap">
						据您{{storeInfoList.distance}}km<u-icon style="float: right;margin-top: 24rpx;" name="arrow-right" color="#999" size="20"></u-icon>
					</view>
				</view>
				<!-- 订单详情 -->
				<view class="orderDetails">
					<view class="detailsEach">订单编号：<text>{{orderInfo.id}}</text></view>
					<view class="detailsEach boxShadow">下单时间：<text>{{getdate(orderInfo.created_at,1)}}</text></view>
					<view class="detailsEach">收货方式：<text>{{orderInfo.is_offline==1?(orderInfo.goodsOwner.is_nomal_virtual==2?'到店消费':'门店自提'):'线上发货'}}</text></view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="handleBox" :style="{paddingBottom:isIphoneX?'40rpx':''}" v-if="orderInfo.is_offline==0">
				<button @tap="applyReturn" v-if="orderInfo.liquor_card_online==0 && orderInfo.is_offline==0 && (orderInfo.afterSales==null || orderInfo.afterSales.apply_cancel==2 || orderInfo.afterSales.status == 3)">申请退货</button>
				<button @tap="applyRefund" v-if="orderInfo.is_offline==1 && (orderInfo.afterSales==null || orderInfo.afterSales.apply_cancel==2 || orderInfo.afterSales.status==3)">申请退款</button>
				<button @tap="revokeApply(orderInfo.afterSales.aftersales_id,orderInfo.afterSales.order_id)" 
				v-if="orderInfo.afterSales!=null && orderInfo.afterSales.type == 2 && orderInfo.afterSales.status == 1 && orderInfo.afterSales.apply_cancel == 1 && orderInfo.afterSalesTimes == null">撤销申请</button>
				<button @tap="anotherAne">再来一单</button>
				<button class="remind" @tap="evaluateGo" v-if="orderInfo.is_comment==1 && (orderInfo.afterSales==null || orderInfo.afterSales.apply_cancel==2 || orderInfo.afterSales.status == 3)">立即评价</button>
			</view>
			<view class="handleBox" :style="{paddingBottom:isIphoneX?'40rpx':''}" v-if="orderInfo.is_offline==1">
				<button @tap="applyReturn" v-if="orderInfo.liquor_card_online==0 && orderInfo.is_offline==0 && (orderInfo.afterSales==null || orderInfo.afterSales.apply_cancel==2 || orderInfo.afterSales.status == 3)">申请退货</button>
				<button @tap="applyRefund" v-if="orderInfo.is_offline==1 && (orderInfo.afterSales==null || orderInfo.afterSales.apply_cancel==2 || orderInfo.afterSales.status==3)">申请退款</button>
				<button @tap="revokeApply(orderInfo.afterSales.aftersales_id,orderInfo.afterSales.order_id)" 
				v-if="orderInfo.afterSales!=null && orderInfo.afterSales.type == 2 && orderInfo.afterSales.status == 1 && orderInfo.afterSales.apply_cancel == 1 && orderInfo.afterSalesTimes == null">撤销申请</button>
				<button @tap="anotherAne"v-if="orderInfo.all_is_verification==1">再来一单</button>
				<button class="remind" @tap="evaluateGo" v-if="orderInfo.all_is_verification==1 && orderInfo.is_comment==1 && (orderInfo.afterSales==null || orderInfo.afterSales.apply_cancel==2 || orderInfo.afterSales.status == 3)">立即评价</button>
			</view>
			
		</view>
		
		<!-- 撤销退款/退货 -->
		<u-modal 
			v-model="tipsshow"
			title="撤销退货"
			content="您仅能主动撤销一次，撤销后将不能在主动撤销，且超出保障期后无法再次发起售后。"
			confirm-text="确认"
			cancel-text="取消"
			:show-cancel-button="true"
			confirm-color="#333333"
			cancel-color="#999999"
			:async-close="true"
			@confirm="confirmtips"
			>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				orderInfo:null,
				order_id:null,
				ownerId:null,
				goodsId:null,
				// 撤销弹窗
				tipsshow:false,
				aftersales_id:null,
				after_order_id:null,
				// 物流信息
				logistics:null,
				// 如果是需要核销的商品这儿要获取商家信息
				storeId:null,
				lat:0,//
				lon:0,//
				storeInfoList:null,
			}
		},
		onLoad: function (option) {
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
			this.order_id = option.id;
		},
		onShow() {
			this.getOrderInfo(this.order_id);
		},
		methods: {
			getOrderInfo(id){
				this.apiget('/fun/order/view',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.orderInfo = res.data.data;
						this.goodsId = res.data.data.items[0].goods_id;
						this.ownerId = res.data.data.goodsOwner.owner_id;
						if(res.data.data.is_offline==0){
							this.getLogistics(id);
						}
						this.storeId = res.data.data.owner_id;
						if(res.data.data.is_offline==1){
							this.isGetLocation();
						}
					}
				})
			},
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
						_this.getStoreInfo();
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			getStoreInfo() {
				this.apiget('/shop/store-front/view',{id:this.storeId,lat:this.lat,lon:this.lon}).then(res =>{
					if(res.data.status == 200 ) {
						this.storeInfoList = res.data.data;
					}
				})
			},
			tomap() {
				uni.openLocation({
					latitude: parseFloat(this.storeInfoList.lat),
					longitude: parseFloat(this.storeInfoList.lon),
					name:this.storeInfoList.name,
					address:this.storeInfoList.address,
					success: function () {
						console.log('success');
					}
				});
			},
			getLogistics(id){
				this.apiget('/fun/order/express-track',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.logistics = res.data.data.list[0];
					}
				})
			},
			logisticsGo(){
				uni.navigateTo({
					url: './logistics?id='+this.order_id
				});
			},
			// 评价
			evaluateGo(){
				uni.navigateTo({
					url: './orderEvaluation?id='+this.order_id
				});
			},
			// 申请退货
			applyReturn(id){
				uni.navigateTo({
					url: '../refund/goodsReason?id='+this.order_id
				});
			},
			// 申請退款
			applyRefund(){
				uni.navigateTo({
					url: '../refund/refundReason?id='+this.order_id
				});
			},
			// 撤销申请
			revokeApply(aftersales_id,order_id){
				this.tipsshow = true;
				this.aftersales_id = aftersales_id,
				this.after_order_id = order_id;
			},
			confirmtips() {
				var _this = this;
				this.tipsshow = false;
				this.apipost('/fun/bill-aftersales/cancel-after-sales',{aftersales_id:this.aftersales_id,order_id:this.after_order_id}).then(res =>{
					if(res.data.status == 200 ) {
						uni.showToast({
							icon: 'success',
							duration:1000,
							title: '撤销成功',
							success: ress => {
								setTimeout(function (){
									_this.getOrderInfo(_this.order_id);
								}, 1000);
							},
						});
					}
				})
			},
			anotherAne() {
				uni.navigateTo({
					url: '../index/goodsInfo?id='+this.goodsId
				});
			}
		}
	}
</script>

<style lang="scss">
	.orderInfoBox{
		min-height: 100%;
		padding-bottom: 160rpx;
		background-color: #F8F8FA;
	}
	.titleBg{
		width: 100%;
		height: 200rpx;
		position: absolute;
		top: 0;
		left:0;
	}
	.mt24{
		margin-top: 24rpx;
	}
	.orderStatesBox{
		position: relative;
		display: flex;
		align-items: center;
	}
	.orderStates{
		flex: auto;
		padding: 20rpx 32rpx;
		font-size: 32rpx;
		line-height: 48rpx;
		color: #fff;
		
		.orderStatesTips{
			font-size: 24rpx;
			line-height: 40rpx;
		}
	}
	.takeGoodsTips{
		position: relative;
		padding: 0 32rpx;
		
		.tipsContBox{
			// min-height: 100rpx;
			padding: 24rpx 32rpx;
			display: flex;
			background-color: #fff;
			box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.02);
			border-radius: 16rpx;
			
			.tipsCont{
				flex: auto;
				margin-left: 32rpx;
				
				.tipsContTit{
					font-size: 32rpx;
					line-height: 48rpx;
					color: #333;
					
					text{
						margin-right: 20rpx;
					}
				}
				.tipsContInfo{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #666;
				}
			}
		}
	}
	
	// 核销码
	.carrdInfoBottom{
		position: relative;
		padding: 48rpx 24rpx 48rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.b-l-t{
			position: absolute;
			top: -14rpx;
			left: -14rpx;
			width: 28rpx;
			height: 28rpx;
			background-color: #F8F8FA;
			border-radius: 50%;
		}
		.b-r-t{
			position: absolute;
			top: -14rpx;
			right: -14rpx;
			width: 28rpx;
			height: 28rpx;
			background-color: #F8F8FA;
			border-radius: 50%;
		}
		
		// 内容
		.pickupCode{
			position: relative;
			text-align: center;
			width: 296rpx;
			// height: 296rpx;
			margin: 0 auto;
			
			img{
				display: inline-block;
				width: 296rpx;
				height: 296rpx;
			}
			
			image{
				display: inline-block;
				width: 296rpx;
				height: 296rpx;
			}
			
			.pickupNum{
				margin-top: 15rpx;
				font-size: 28rpx;
				color: #666;
				line-height: 44rpx;
			}
			
			.pickedUpMask{
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -148rpx;
				width: 296rpx;
				height: 296rpx;
				background-color: rgba(255,255,255,.95);
				
			}
			.pickedUp{
				position: absolute;
				top: -18rpx;
				right: -38rpx;
				width: 138rpx;
				height: 138rpx;
			}
		}
		
	}
	
	// 商家信息
	.useRule{
		padding: 24rpx 32rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.useRuleTit{
			// margin-bottom: 30rpx;
			font-size: 32rpx;
			line-height: 48rpx;
			color: #333;
		}
		
		.seeDesirable{
			padding: 22rpx 24rpx;
			display: flex;
			align-items: center;
			
			.left{
				flex: auto;
				
				.tit{
					font-size: 28rpx;
					line-height: 44rpx;
					color: #333;
					
					text{
						display: inline-block;
						padding: 0 16rpx;
						margin-left: 8rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #FF5238;
						background: rgba(255, 82, 56, 0.12);
						border-radius: 40rpx;
					}
				}
				
				.tips{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #999;
				}
			}
		
		}
		.mapBox{
			height: 236rpx;
			background-color: #F8F8FA;
		}
			
		.distance{
			height: 68rpx;
			padding: 0 24rpx;
			font-size: 24rpx;
			line-height: 68rpx;
			background-color: #F8F8FA;
			color: #333;
		}
	}
	
	.orderDetails{
		padding: 26rpx 32rpx;
		margin-top: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.detailsEach{
			padding: 18rpx 0;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;
			
			text{
				color: #333333;
				font-weight: bold;
			}
		}
		.boxShadow{
			box-shadow: inset 0px -0.5px 0px #F5F5F5;
		}
	}
	.handleBox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 18rpx 32rpx;
		text-align: right;
		background-color: #fff;
		
		button{
			background-color: inherit;
			display: inline-block;
			height: 60rpx;
			padding: 0 40rpx;
			margin-right: 16rpx;
			color: #666666;
			font-size: 24rpx;
			line-height: 60rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			border: 2rpx solid #999999;
			
		}
		.remind{
			border: 2rpx solid #FF5238;
			color: #FF5238;
		}
		.goPay{
			color: #fff;
			background-color: #FF5238;
			border: 2rpx solid #FF5238;
		}
	}
	.infoContBox{
		padding: 24rpx 24rpx 16rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		
		.orderTiem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666666;
		}
		
		
		.shopInfo{
			display: flex;
			padding-bottom: 24rpx;
			font-size: 28rpx;
			line-height: 44rpx;
			
			.shopLogo{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		
		.goodsCont{
			padding: 24rpx;
			margin-bottom: 8rpx;
			display: flex;
			background: rgba(64, 169, 255, 0.1);
			border-radius: 16rpx;
			
			.niccImg {
				width:120rpx;
				height: 120rpx;
				margin-right: 24rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}
			
			.goodsInfo{
				flex: auto;
				
				.tit{
					display: flex;
					margin-bottom: 16rpx;
					font-size: 24rpx;
					color: #666;
					line-height: 40rpx;
					
					.titleft{
						flex: auto;
						width: 1px;
					}
				}
				
				.specsBox{
					display: flex;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #999;
					
					.specs{
						flex: auto;
					}
				}
				
				.priceBox{
					display: flex;
					margin-top: 8rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #333333;
					
					.price{
						flex: auto;
					}
					
					text{
						color: #999999;
					}
				}
			}
		}
		
		
		.detailsEach{
			padding: 18rpx 0;
			font-size: 26rpx;
			line-height: 40rpx;
			color: #333;
			
			text{
				float: right;
				font-weight: bold;
			}
		}
		.detailsEach2{
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;
			font-weight: bold;
			
			text{
				float: right;
			}
		}
		.orange{
			color: #FF5238;
		}
		.borderLine{
			padding-bottom: 25rpx;
			margin-bottom: 16rpx;
			border-bottom: 2rpx solid #EEEFF3;
		}
	}
</style>
